<template>
  <div class="app-container home">
    <div class="bg_fff p_10 listbody">
      <div class="flexrowbetween flexwrapper" style="align-items: flex-start">
        <div class="flex">
          <div
            class="iconbox flexcenter commhover mr_10"
            @click="resetQuery"
          >
            <i class="el-icon-refresh f-20" :class="{ rotate: isrefresh }"></i>
          </div>
          <el-button plain type="primary" size="mini" @click="handleAdd">添加</el-button>
        </div>
        <div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="0"
          >
            <el-form-item prop="keyword">
              <el-input
                class="searchinput"
                v-model="queryParams.keyword"
                placeholder="请输入用户等级"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                class="f-14"
                type=""
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              ></el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        ref="tablelayout"
        class="commtable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="ID"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="用户等级"
          prop="plate"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.name || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          label="等级积分"
          prop="user_login"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.score || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success" class="tag_success" v-if="scope.row.status == 1">正常</el-tag>
            <el-tag type="danger" class="tag_danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="created_at"
          label="操作"
          width="220"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="flex btnflex">
              <div
                class="commhover btn_green mr_10 c_fff"
                @click="handleEdit(scope.row)"
              >
                <i class="el-icon-delete f-14"></i> 编辑
              </div>
              <div class="commhover btn_yellow c_fff"
                  @click="handleDelete(scope.row)">
                  <i class="el-icon-delete f-14"></i> 删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.num"
        @pagination="getList"
      />

      <el-dialog
        :title="isadd ? '添加' : '编辑'"
        :visible.sync="dialogAddVisible"
        width="680px"
        class="dialogheaderbg"
        :before-close="handleCloseAdd"
        :close-on-click-modal='false'
      >
        <add-member v-if="dialogAddVisible"
          ref="addmember"
          :isadd="isadd"
          :row="row"
          @close="handleCloseAdd"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { memberIndexExport,scoreIndexPage,scoreDel } from '@/api/member'
import AddMember from "./components/AddMember.vue";

export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
        keyword: undefined,
      },
      total: 1,
      loading: false,
      tableData: [],
      isrefresh: false,
      dialogAddVisible: false,
      multiple: true,
      isadd: true,
      title: "",
      row: null,
      exportloading:false
      // 日志
      // dialoglogVisible: false,
      // rowId: "",
      // 预览
      // dialogView: false,
    };
  },

  props: {
    type: {
      type: Number,
      default: 0,
    },
  },

  components: {
    AddMember,
  },

  created() {
    this.getList()
  },

  methods: {
    getList() {
      this.loading = true;
      let params = { 
        page: this.queryParams.page,
        num: this.queryParams.num 
      }
      if(this.queryParams.keyword){
        params.keyword = this.queryParams.keyword
      }
      // if(this.type){
      //   params.level = this.type
      // }
      scoreIndexPage(params).then((response) => {
        this.tableData = response.data.list;
        this.total = response.data.count;
        this.loading = false;
      });
      this.isrefresh = false;
      this.loading = false;
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.isrefresh = true;
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleSelectionChange(selection) {
      this.rowids = selection.map((item) => item.id);
      // this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handleAdd() {
      this.row = null
      this.isadd = true;
      this.dialogAddVisible = true;
    },

    handleCloseAdd(type) {
      this.$refs.addmember.resetForm();
      if(type == 1){
        this.getList()
      }
      this.dialogAddVisible = false;
    },

    handleEdit(row) {
      console.log('row:',row)
      this.row = row;
      this.isadd = false;
      this.dialogAddVisible = true;
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.id || this.rowids;
      this.$modal.confirm('是否确认删除编号为"' + infoIds + '"的数据项？').then(function() {
        return scoreDel({id:infoIds});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    handleExport(){
      let params = {
        head:['ID','平台','用户名','会员等级','手机号','余额','开通时间','有效期','登陆时间','注册时间','渠道','状态','活动数量'],
        keys:['id','plate','user_login','member_type.name','mobile','coin','open_time','expire_time','last_login_time','create_time','member_ditch.name','status_name','task_num'],
      }
      if(this.queryParams.keyword){
        params.keyword = this.queryParams.keyword
      }
      if(this.type){
        params.level = this.type
      }
      this.exportloading = true
      memberIndexExport(params).then(res=>{
        let url = res.data
        this.$message.success("正在下载，请稍后");
        var a = document.createElement("a");
        a.setAttribute("href", url);
        a.click();
        this.exportloading = false
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.iconbox {
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 2px;
}
.imgmini {
  width: 40px;
  height: 40px;
  margin: auto;
}
.imgbox {
  width: 120px;
  height: 120px;
}
</style>
<style lang="scss">
.noheaderdia {
  .el-dialog__header {
    padding: 0 !important;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>